<template> 
	<view> 
		<view class="page"> 
			<comp-common v-bind="{data:data}"></comp-common> 
			<comp-header v-bind="{data:data}"></comp-header> 
			<view class="body after-navber"> 
				<block v-if="data.order"> 
					<view style="background: #fff;border-top: 1upx solid #e3e3e3;border-bottom: 1upx solid #e3e3e3;padding: 24upx;margin-bottom: 24upx"> 
						<view class="flex flex-row" style="border-bottom: 1upx solid #eee;padding-bottom: 24upx"> 
							<view class="flex-grow-1" style="color: #25b6ed">订单详情</view> 
							<view class="flex-grow-0">状态：{{data.order.status_text}}</view> 
						</view> 
						<view style="padding: 24upx 0"> 
							<view style="margin-bottom: 24upx">订单编号：{{data.order.order_no}}</view> 
							<view>下单时间：{{data.order.addtime}}</view> 
						</view> 
						<view class="flex flex-row" style="margin-bottom: 24upx" v-for="(oitem,oindex) in data.order.goods_list" :key="oindex"> 
							<view class="flex-grow-0"> 
								<image mode="aspectFill" :src="oitem.cover_pic" style="width: 156upx;height: 156upx;margin-right: 20upx"></image> 
							</view> 
							<view class="flex-grow-1"> 
								<view class="goods-name">{{oitem.name}}</view> 
								<view class="flex flex-row" style="color: #888;font-size: 9pt;"> 
									<view class="flex-grow-1"> 
										<view style="margin-right: 32upx;display: inline-block" v-for="(aitm,aindex) in oitem.attr" :key="aindex">{{aitem.attr_group_name}}:{{aitem.attr_name}} 
										</view> 
									</view> 
									<view class="flex-grow-0">×{{oitem.num}}</view> 
								</view> 
								<view style="text-align: right;color: #ff4544;font-size: 9pt">￥{{oitem.total_price}}</view> 
							</view> 
						</view> 
						<view class="flex flex-row" style="padding-bottom: 24upx;color: #888"> 
							<view class="flex-grow-1">运费</view> 
							<view class="flex-grow-0">+￥{{data.order.express_price}}</view> 
						</view> 
						<view class="flex flex-row" style="padding-top:24upx;border-top: 1upx solid #eee"> 
							<view class="flex-grow-1">实际支付</view> 
							<view class="flex-grow-0">￥{{data.order.pay_price}}</view> 
						</view> 
						<view class="flex flex-row" style="padding-top:24upx;" v-if="data.order.is_pay==0"> 
							<view class="flex-grow-1"></view> 
							<view class="flex-grow-0"> 
								<button @click="showEditModal" class="order-item-btn">改价</button> 
							</view> 
						</view> 
					</view> 
					<view style="background: #fff;border-top: 1upx solid #e3e3e3;border-bottom: 1upx solid #e3e3e3;padding: 24upx;margin-bottom: 24upx"> 
						<view class="flex flex-row" style="border-bottom: 1upx solid #eee;padding-bottom: 24upx"> 
							<view class="flex-grow-1" style="color: #25b6ed">收货信息</view> 
							<view class="flex-grow-0">{{data.order.express_type}}</view> 
						</view> 
						<view @click="copyUserAddress"> 
							<view class="flex flex-row" style="margin: 20upx 0"> 
								<view class="flex-grow-0" style="min-width: 160upx;text-align: right;">收货人:</view> 
								<view class="flex-grow-1" style="padding-left: 48upx">{{data.order.name}}</view> 
							</view> 
							<view class="flex flex-row" style="margin: 20upx 0"> 
								<view class="flex-grow-0" style="min-width: 160upx;text-align: right;">联系电话:</view> 
								<view class="flex-grow-1" style="padding-left: 48upx">{{data.order.mobile}}</view> 
							</view> 
							<view class="flex flex-row" style="margin: 20upx 0"> 
								<view class="flex-grow-0" style="min-width: 160upx;text-align: right;">收货地址:</view> 
								<view class="flex-grow-1" style="padding-left: 48upx">{{data.order.address}}</view> 
							</view> 
						</view> 
						<block v-if="data.order.is_pay==1"> 
							<view class="flex flex-row" style="padding: 24upx 0;border-top: 1upx solid #eee" v-if="data.order.is_send==0"> 
								<view class="flex-grow-1">买家已付款，请及时发货</view> 
								<view class="flex-grow-0" style="padding-left: 48upx"> 
									<button @click="showSendModal" class="order-item-btn">发货</button> 
								</view> 
							</view> 
							<view style="padding: 24upx 0;border-top: 1upx solid #eee" v-else> 
								<view style="text-align: right" v-if="data.order.is_confirm==0"> 
									<button @click="showSendModal" class="order-item-btn">修改物流信息</button> 
								</view> 
								<view v-if="data.order.is_express==1"> 
									<view class="flex flex-row" style="margin: 20upx 0"> 
										<view class="flex-grow-0" style="min-width: 160upx;text-align: right;">快递单号:</view> 
										<view class="flex-grow-1" style="padding-left: 48upx">{{data.order.express_no}}</view> 
									</view> 
									<view class="flex flex-row" style="margin: 20upx 0"> 
										<view class="flex-grow-0" style="min-width: 160upx;text-align: right;">快递公司:</view> 
										<view class="flex-grow-1" style="padding-left: 48upx">{{data.order.express}}</view> 
									</view> 
									<view class="flex flex-row" style="margin: 20upx 0"> 
										<view class="flex-grow-0" style="min-width: 160upx;text-align: right;">物流信息:</view> 
										<view class="flex-grow-1" style="padding-left: 48upx"> 
											<view class="express-detail-list" v-if="data.order.express_data.data.list"> 
												<view class="express-detail-item" v-for="(oeitem,oeindex) in data.order.express_data.data.list" :key="oeindex"> 
													<view>{{oeitem.detail}}</view> 
													<view style="color: #888">{{oeitem.datetime}}</view> 
												</view> 
											</view> 
											<view style="color: #888" v-else>暂无物流信息</view> 
										</view> 
									</view> 
								</view> 
							</view> 
						</block> 
					</view> 
				</block> 
			</view> 
			<view class="order-modal flex flex-x-center flex-y-center " :class="data.show_edit_modal?'show':''"> 
				<view class="modal-dialog" style="margin-top: -20vh"> 
					<view class="modal-body"> 
						<view class="flex flex-row order-tab"> 
							<view @click="tabSwitch" class="flex-grow-1 order-tab-item " :class="data.order_sub_price_mode?'active':''" 
							 data-tab="order_sub_price_mode">优惠 
							</view> 
							<view @click="tabSwitch" class="flex-grow-1 order-tab-item " :class="data.order_add_price_mode?'active':''" 
							 :data-tab="data.order_add_price_mode">加价 
							</view> 
						</view> 
						<view style="padding: 40upx" v-if="data.order_sub_price_mode"> 
							<input @blur="subPriceBlur" @input="subPriceInput" class="order-input" confirmType="done" placeholder="请输入优惠金额（元）" 
							 style="margin-bottom: 24upx" type="digit" :value="data.order_sub_price"/> 
							<view style="font-size: 9pt">最多还可优惠{{data.order.max_sub_price}}元</view> 
						</view> 
						<view style="padding: 40upx" v-if="data.order_add_price_mode"> 
							<input @blur="addPriceBlur" @input="addPriceInput" class="order-input" confirmType="done" placeholder="请输入加价金额（元）" 
							 style="margin-bottom: 24upx" type="digit" :value="data.order_add_price"/> 
							<view style="font-size: 9pt">加价金额无限制</view> 
						</view> 
					</view> 
					<view class="modal-footer flex flex-row"> 
						<button @click="hideEditModal" class="flex-grow-1 modal-cancel">取消 
							<view class="modal-split"></view> 
						</button> 
						<button @click="editPriceSubmit" class="flex-grow-1 modal-confirm">确认</button> 
					</view> 
				</view> 
				<view class="modal-bg"></view> 
			</view> 
			<view class="order-modal flex flex-x-center flex-y-center " :class="[data.show_send_modal?'show':'']"> 
				<view class="modal-dialog" style="margin-top: -20vh"> 
					<view class="modal-body"> 
						<view style="padding-top: 40upx;text-align: center">选择发货方式</view> 
						<view class="flex flex-row" style="padding: 48upx 24upx"> 
							<view class="flex-grow-1" style="text-align: center"> 
								<view @click="switchSendType" class="order-item-btn order-modal-btn " :class="[data.send_type=='express'?'active':'']" 
								 data-type="express">快递配送 
								</view> 
							</view> 
							<view class="flex-grow-1" style="text-align:center"> 
								<button @click="switchSendType" class="order-item-btn order-modal-btn " :class="[data.send_type=='none'?'active':'']" 
								 data-type="none">无需物流 
								</button> 
							</view> 
						</view> 
					</view> 
					<view class="modal-footer flex flex-row"> 
						<button @click="hideSendModal" class="flex-grow-1 modal-cancel">取消 
							<view class="modal-split"></view> 
						</button> 
						<button @click="sendSubmit" class="flex-grow-1 modal-confirm">确认</button> 
					</view> 
				</view> 
				<view class="modal-bg"></view> 
			</view> 
			<comp-footer v-bind="{data:data}"></comp-footer> 
		</view> 
 
	</view> 
</template> 
 
<script>var myVue = {}; 
	export default { 
		data() { 
			return { 
				data: { 
					show_edit_modal: !1, 
					order_sub_price: "", 
					order_sub_price_mode: !0, 
					order_add_price: "", 
					order_add_price_mode: !1, 
					show_send_modal: !1, 
					send_type: "express", 
					order: {} 
				} 
			} 
		}, 
		  onLoad: function(e) {myVue = this; 
		    myVue.getApp.page.onLoad(this, e); 
		    var t = this; 
		    t.getApp.core.showLoading({ 
		        title: "正在加载", 
		        mask: !0 
		    }), t.getApp.request({ 
		        url: t.getApp.api.store.order.detail, 
		        data: { 
		            id: e.id 
		        }, 
		        success: function(e) { 
		            0 == e.code ? t.setData({ 
		                order: e.data.order 
		            }) : t.getApp.core.showModal({ 
		                title: "提示", 
		                content: e.msg, 
		                showCancel: !1, 
		                success: function(e) { 
		                    e.confirm && t.getApp.core.navigateBack(); 
		                } 
		            }); 
		        }, 
		        complete: function() { 
		            t.getApp.core.hideLoading(); 
		        } 
		    }); 
		}, 
		onReady: function() { 
		    myVue.getApp.page.onReady(this); 
		}, 
		onShow: function() { 
		    myVue.getApp.page.onShow(this); 
		}, 
		onHide: function() { 
		    myVue.getApp.page.onHide(this); 
		}, 
		onUnload: function() { 
		    myVue.getApp.page.onUnload(this); 
		}, 
		onPullDownRefresh: function() {}, 
		onReachBottom: function() {}, 
		methods:{ 
			 copyUserAddress: function() { 
			    var t = this; 
			    t.getApp.core.setClipboardData({ 
			        data: "收货人:" + t.data.order.username + ",联系电话:" + t.data.order.mobile + ",收货地址:" + t.data.order.address, 
			        success: function(e) { 
			            t.getApp.core.getClipboardData({ 
			                success: function(e) { 
			                    t.showToast({ 
			                        title: "已复制收货信息" 
			                    }); 
			                } 
			            }); 
			        } 
			    }); 
			}, 
			showEditModal: function(e) { 
			    this.setData({ 
			        show_edit_modal: !0, 
			        order_sub_price: "", 
			        order_add_price: "", 
			        order_sub_price_mode: !0, 
			        order_add_price_mode: !1 
			    }); 
			}, 
			hideEditModal: function(e) { 
			    this.setData({ 
			        show_edit_modal: !1 
			    }); 
			}, 
			tabSwitch: function(e) { 
			    var t = e.currentTarget.dataset.tab; 
			    "order_sub_price_mode" == t && this.setData({ 
			        order_sub_price_mode: !0, 
			        order_add_price_mode: !1 
			    }), "order_add_price_mode" == t && this.setData({ 
			        order_sub_price_mode: !1, 
			        order_add_price_mode: !0 
			    }); 
			}, 
			subPriceInput: function(e) { 
			    this.setData({ 
			        order_sub_price: e.detail.value 
			    }); 
			}, 
			subPriceBlur: function(e) { 
			    var t = parseFloat(e.detail.value); 
			    t = isNaN(t) ? "" : t <= 0 ? "" : t.toFixed(2), this.setData({ 
			        order_sub_price: t 
			    }); 
			}, 
			addPriceInput: function(e) { 
			    this.setData({ 
			        order_add_price: e.detail.value 
			    }); 
			}, 
			addPriceBlur: function(e) { 
			    var t = parseFloat(e.detail.value); 
			    t = isNaN(t) ? "" : t <= 0 ? "" : t.toFixed(2), this.setData({ 
			        order_add_price: t 
			    }); 
			}, 
			editPriceSubmit: function() { 
			    var d = this, e = d.data.order_sub_price_mode ? "sub" : "add"; 
			    d.getApp.core.showLoading({ 
			        mask: !0, 
			        title: "正在处理" 
			    }), d.getApp.request({ 
			        url: getApp().api.store.order.edit_price, 
			        method: "post", 
			        data: { 
			            order_id: d.data.order.id, 
			            type: e, 
			            price: "sub" == e ? d.data.order_sub_price : d.data.order_add_price 
			        }, 
			        success: function(t) { 
			            d.getApp.core.showModal({ 
			                title: "提示", 
			                content: t.msg, 
			                showCancel: !1, 
			                success: function(e) { 
			                    e.confirm && 0 == t.code && d.getApp.core.redirectTo({ 
			                        url: "/store/m/order-detail/order-detail?id=" + d.data.order.id 
			                    }); 
			                } 
			            }); 
			        }, 
			        complete: function() { 
			            d.getApp.core.hideLoading(); 
			        } 
			    }); 
			}, 
			showSendModal: function() { 
			    this.setData({ 
			        show_send_modal: !0, 
			        send_type: "express" 
			    }); 
			}, 
			hideSendModal: function() { 
			    this.setData({ 
			        show_send_modal: !1 
			    }); 
			}, 
			switchSendType: function(e) { 
			    var t = e.currentTarget.dataset.type; 
			    this.setData({ 
			        send_type: t 
			    }); 
			}, 
			sendSubmit: function() { 
			    var d = this; 
			    if ("express" == d.data.send_type) return d.hideSendModal(), void getApp().core.navigateTo({ 
			        url: "/store/m/order-send/order-send?id=" + d.data.order.id 
			    }); 
			    d.getApp.core.showModal({ 
			        title: "提示", 
			        content: "无需物流方式订单将直接标记成已发货，确认操作？", 
			        success: function(e) { 
			            e.confirm && (getApp().core.showLoading({ 
			                title: "正在提交", 
			                mask: !0 
			            }), d.getApp.request({ 
			                url: d.getApp.api.store.order.send, 
			                method: "post", 
			                data: { 
			                    send_type: "none", 
			                    order_id: d.data.order.id 
			                }, 
			                success: function(t) { 
			                    d.getApp.core.showModal({ 
			                        title: "提示", 
			                        content: t.msg, 
			                        success: function(e) { 
			                            e.confirm && 0 == t.code && d.getApp.core.redirectTo({ 
			                                url: "/store/m/order-detail/order-detail?id=" + d.data.order.id 
			                            }); 
			                        } 
			                    }); 
			                }, 
			                complete: function() { 
			                    d.getApp.core.hideLoading({ 
			                        title: "正在提交", 
			                        mask: !0 
			                    }); 
			                } 
			            })); 
			        } 
			    }); 
			} 
			 
		} 
 
	} 
</script> 
 
<style scoped> 
	.order-modal { 
		position: fixed; 
		top: 0; 
		left: 0; 
		width: 100%; 
		height: 100%; 
		z-index: 100; 
		transform: translateY(100%); 
		overflow-x: hidden; 
		overflow-y: auto; 
	} 
 
	.order-modal .modal-bg { 
		background: rgba(0, 0, 0, .5); 
		position: absolute; 
		left: 0; 
		top: 0; 
		width: 100%; 
		height: 100%; 
		z-index: -1; 
		opacity: 0; 
		transition: 350ms; 
	} 
 
	.order-modal .modal-dialog { 
		background: #fff; 
		width: 75vw; 
		border-radius: 16upx; 
		box-shadow: 0 2upx 10upx rgba(0, 0, 0, .1); 
		opacity: .25; 
		transform: translateY(50%); 
		transition: 250ms; 
		overflow: hidden; 
	} 
 
	.order-modal .modal-header { 
		text-align: center; 
		padding: 40upx 0; 
		font-weight: 400; 
	} 
 
	.order-modal .modal-body {} 
 
	.order-modal .modal-footer { 
		border-top: 1upx solid #eee; 
	} 
 
	.order-modal .modal-cancel, 
	.order-modal .modal-confirm { 
		background: #fff; 
		font-weight: 11pt; 
		font-family: inherit; 
		height: 88upx; 
		line-height: 88upx; 
		padding: 0 0; 
		text-align: center; 
		border: none; 
		border-radius: 0; 
		color: #555; 
		position: relative; 
	} 
 
	.order-modal .modal-confirm { 
		color: #ff4544; 
	} 
 
	.order-modal .modal-cancel:after, 
	.order-modal .modal-confirm:after { 
		display: none; 
	} 
 
	.order-modal .modal-split { 
		position: absolute; 
		right: 0; 
		top: 22upx; 
		height: 44upx; 
		width: 1upx; 
		background: #e3e3e3; 
	} 
 
	.order-modal .modal-footer .button-hover { 
		opacity: .75; 
		background: #e3e3e3; 
	} 
 
	.order-modal.show { 
		transform: translateY(0%); 
	} 
 
	.order-modal.show .modal-bg { 
		opacity: 1; 
	} 
 
	.order-modal.show .modal-dialog { 
		transform: translateY(0%); 
		opacity: 1; 
	} 
 
	.order-item-btn { 
		display: inline-block; 
		font-size: 9pt; 
		height: 60upx; 
		line-height: 60upx; 
		padding: 0 24upx; 
		margin-left: 24upx; 
		border: 1upx solid #ccc; 
		color: #555; 
		border-radius: 8upx; 
		background: #fff; 
		margin-bottom: -10upx; 
	} 
 
	.order-item-btn.button-hover { 
		opacity: .75; 
	} 
 
	.order-item-btn:after { 
		display: none; 
	} 
 
	.order-tab {} 
 
	.order-tab .order-tab-item { 
		text-align: center; 
		height: 88upx; 
		line-height: 88upx; 
		border-bottom: 1upx solid #eee; 
	} 
 
	.order-tab .order-tab-item.active { 
		background: #ff4544; 
		color: #fff; 
		border-bottom-color: #ff4544; 
	} 
 
	.order-modal-btn { 
		height: 80upx; 
		line-height: 80upx; 
		padding: 0 32upx; 
		border: 1upx solid #e2e2e2; 
		border-radius: 16upx; 
		font-size: 11pt; 
		margin: 0 0; 
	} 
 
	.order-modal-btn.active { 
		background: #ff4544; 
		color: #fff; 
		border-color: #ff4544; 
	} 
 
	.order-input { 
		height: 88upx; 
		line-height: 88upx; 
		padding: 0; 
		border: none; 
		border-bottom: 1upx solid #e3e3e3; 
	} 
 
	.goods-name { 
		display: -webkit-box; 
		-webkit-box-orient: vertical; 
		-webkit-line-clamp: 2; 
		overflow: hidden; 
		font-size: 32upx; 
		line-height: 36upx; 
		height: 72upx; 
		word-break: break-all; 
		color: #888; 
		margin-bottom: 12upx; 
	} 
 
	.express-detail-list {} 
 
	.express-detail-item { 
		position: relative; 
		padding-left: 24upx; 
		font-size: 9pt; 
		margin-bottom: 32upx; 
	} 
 
	.express-detail-item::before { 
		position: absolute; 
		left: -9upx; 
		top: 16upx; 
		content: " "; 
		display: inline-block; 
		width: 20upx; 
		height: 20upx; 
		border-radius: 999upx; 
		background: #ccc; 
		z-index: 1; 
	} 
 
	.express-detail-item::after { 
		position: absolute; 
		left: 0; 
		top: 30upx; 
		bottom: -50upx; 
		content: " "; 
		display: inline-block; 
		width: 2upx; 
		background: #ccc; 
		z-index: 0; 
	} 
 
	.express-detail-item:first-child::before { 
		background: #25ae5f; 
		width: 20upx; 
		height: 20upx; 
		left: -13upx; 
		border: 5upx solid #a5e2ad; 
	} 
 
	.express-detail-item:first-child { 
		color: #25ae5f; 
	} 
 
	.express-detail-item:last-child::after { 
		display: none; 
	} 
</style> 
